<template>
    <el-dialog v-model="dialogUserVisible" title="用户信息" width="500px" center draggable>
        <el-container>
            <el-aside width="200px">
                <el-avatar shape="square" :size="120"
                    :src="userData.imgUrl || 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png'" />
            </el-aside>
            <el-main>
                <div>账号：{{ userData.account }}</div>
                <div>姓名：{{ userData.name }}</div>
                <div>性别：{{ userData.sex }}</div>
                <div>部门：{{ userData.department }}</div>
                <div>邮箱：{{ userData.email }}</div>
                <div>状态：
                    <el-tag v-if="userData.status === '0'" type="success">正常</el-tag>
                    <el-tag v-else type="danger">冻结</el-tag>
                </div>
            </el-main>
        </el-container>
        <el-footer>
            <span @click="openEdit(userData.id)">编辑</span>
            <span @click="openPromote(userData.id)">赋权</span>
            <span @click="openDelete(userData.id)">删除</span>
        </el-footer>
        <Promote ref="promote"></Promote>
        <Edit ref="edit"></Edit>
        <Delete ref="del"></Delete>
    </el-dialog>
</template>

<script setup lang="ts">
    import { reactive, ref, toRefs, defineExpose, onBeforeUnmount } from 'vue'
    import { bus } from '@/utils/mitt'
    import Promote from '../components/promote.vue'
    import Edit from '../components/edit_user.vue'
    import Delete from '../components/delete_admin.vue'

    const statusText = ref({
        '0': '正常',
        '1': '冻结'
    })

    const del = ref()

    const openDelete = (id: any) => {
        const userInfo = {
            id,
            account: userData.account
        }
        bus.emit('deleteUserId', userInfo)
        del.value.open()
    }

    const edit = ref()
    const openEdit = (id: any) => {
        bus.emit('editId', id)
        edit.value.open()
    }

    const promote = ref()
    bus.on('offDialog', (id: number) => {
        if (id == 1) {
            dialogUserVisible.value = false
        }
    })
    const openPromote = (id: any) => {
        bus.emit('promoteId', id)
        promote.value.open()
    }

    bus.on('userId', (row: any) => {
        userData.id = row.id
        userData.imgUrl = row.image_url
        userData.name = row.name
        userData.account = row.account
        userData.email = row.email
        userData.sex = row.sex
        userData.department = row.department
        userData.status = row.status
    })


    const userData = reactive({
        id: '',
        name: '',
        email: '',
        sex: '',
        department: '',
        account: '',
        status: '0',
        imgUrl: ''
    })
    const dialogUserVisible = ref(false)
    const open = () => {
        dialogUserVisible.value = true
    }
    defineExpose({
        open
    })
    onBeforeUnmount(() => {
        bus.all.clear()
    })
</script>
<style scoped lang="scss">
    .el-main {
        --el-main-padding: 0;

        >div {
            margin-bottom: 8px;
        }
    }

    .el-footer {
        display: flex;
        justify-content: flex-end;
        --el-footer-height: 18px;

        span {
            margin-left: 8px;
            color: #409eff;
            cursor: pointer;
        }
    }
</style>